<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="content">场所信息详情</block>
				<!-- <view slot="right" v-show="current === 0" @tap="detailpopup">编辑信息</view> -->
			</cu-custom>

			<view class="chosecard">
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
					activeColor="#4cd964"></uni-segmented-control>
			</view>

			<view class="qingkuan">
				<view v-show="current === 0" class="one">
					<view class="formbox">
						<view class="border">
							<uni-forms ref="form" :modelValue="formData" :rules="rules">
								<uni-forms-item label="场所名称" name="placeName">
									<input class="input" disabled v-model="formData.placeName" type="text" />
								</uni-forms-item>
								<uni-forms-item label="场所类型" name="placeType">
									<input class="input" disabled v-model="formData.placeTypeText" type="text" />
								</uni-forms-item>
								<uni-forms-item label="行业类别" name="industryCategory">
									<uni-data-picker :readonly="true" :border="false"
										v-model="formData.industryCategory" :localdata="categoryList"
										:clear-icon="false" popup-title="请行业类别"></uni-data-picker>
								</uni-forms-item>
								<uni-forms-item label="场所状态" name="placeStatus">
										<input class="input" disabled v-model="formData.placeStatusText" type="text" />
								</uni-forms-item>
							</uni-forms>
						</view>
						<view class="border">
							<uni-forms ref="form" :modelValue="formData" :rules="rules">
								<!-- <uni-forms-item label="白码地址" name="addressRecognition">
									<input class="input" disabled v-model="formData.addressRecognition" type="text" />
								</uni-forms-item>
								<uni-forms-item label="门牌地址" name="houseAddress">
									<input class="input" disabled v-model="formData.houseAddress" type="text" />
								</uni-forms-item>

								<uni-forms-item label="地址编码" name="addressCoding">
									<input class="input" disabled v-model="formData.addressCoding" type="text" />
								</uni-forms-item>
								<uni-forms-item label="楼栋编码" name="buildingCode">
									<input class="input" disabled v-model="formData.buildingCode" type="text" />
								</uni-forms-item>
								<uni-forms-item label="门牌名称" name="houseName">
									<input class="input" disabled v-model="formData.houseName" type="text" />
								</uni-forms-item> -->
								<uni-forms-item label="使用面积" name="usableArea">
									<input class="input" disabled v-model="formData.usableArea" type="text" />
									<view class="posit">m²</view>
								</uni-forms-item>
								<uni-forms-item label="建筑面积" name="buildingArea">
									<input class="input" disabled v-model="formData.buildingArea" type="text" />
									<view class="posit">m²</view>
								</uni-forms-item>
								<uni-forms-item label="建筑高度" name="buildingHeight">
									<input class="input" disabled v-model="formData.buildingHeight" type="text" />
									<view class="posit">m</view>
								</uni-forms-item>
								<uni-forms-item label="使用楼层" name="floor">
									<input class="input" disabled v-model="formData.floor" type="text" />
									<view class="posit">层</view>
								</uni-forms-item>
							</uni-forms>
						</view>

						<view class="border"> 
							<uni-forms ref="form" :modelValue="formData" :rules="rules">
								<uni-forms-item label="所属地区" name="community">
										<input class="input" disabled v-model="formData.communityText" type="text" />
								</uni-forms-item>
								<uni-forms-item label="网格号" name="grid">
									<input class="input" disabled v-model="formData.grid" type="text" />
								</uni-forms-item>
								<uni-forms-item label="场所编码" name="placeCode">
									<input class="input" disabled v-model="formData.placeCode" type="text" />
								</uni-forms-item>
								<uni-forms-item label="详细地址" name="address">
									<input class="input" disabled v-model="formData.address" type="text" />
								</uni-forms-item>
								<!-- <uni-forms-item label="面积(平米)" name="acreage">
									<input class="input" disabled v-model="formData.acreage" type="text" />
								</uni-forms-item> -->
								<uni-forms-item label="负责人" name="principalName">
									<input class="input" disabled v-model="formData.principalName" type="text" />
								</uni-forms-item>
								<uni-forms-item label="联系电话" name="principalPhone">
									<input class="input" disabled v-model="formData.principalPhone" type="text" />
								</uni-forms-item>
							</uni-forms>
						</view>
					</view>
				</view>
				<view v-show="current === 1">
					<view class="photocai">
						<view class="li">
							<view class="top">场所正面照
								<span v-if="role != 'auditor' && role != 'linkman'" @click="apiditBatch(1)">+编辑</span>
							</view>
							<image @click.stop="photoPreview(photoData,index)" :src="item.url" mode="aspectFill"
								v-for="(item,index) in photoData" :key="index" v-if="item.type == 1"></image>
						</view>
						<view class="li">
							<view class="top">营业执照
								<span v-if="role != 'auditor' && role != 'linkman'" @click="apiditBatch(2)">+编辑</span>
							</view>
							<image @click.stop="photoPreview(photoData,index)" :src="item.url" mode="aspectFill"
								v-for="(item,index) in photoData" :key="index" v-if="item.type == 2"></image>
						</view>
						<view class="li">
							<view class="top">安全培训照片
								<span v-if="role != 'auditor' && role != 'linkman'" @click="apiditBatch(3)">+编辑</span>
							</view>
							<image @click.stop="photoPreview(photoData,index)" :src="item.url" mode="aspectFill"
								v-for="(item,index) in photoData" :key="index" v-if="item.type == 3"></image>
						</view>
						<view class="li">
							<view class="top">消防安全承诺书
								<span v-if="role != 'auditor' && role != 'linkman'" @click="apiditBatch(4)">+编辑</span>
							</view>
							<image @click.stop="photoPreview(photoData,index)" :src="item.url" mode="aspectFill"
								v-for="(item,index) in photoData" :key="index" v-if="item.type == 4"></image>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部 -->
			<block v-if="role != 'auditor' && role != 'linkman'">
				<view class="fixedbottm" v-show="current === 0">
					<view class="padding flex flex-direction">
						<button class="cu-btn bg-blue lg shadow" @tap="detailpopup">重新编辑信息</button>
					</view>
				</view>
				
			</block>

			<!-- 弹出新增图片弹框 -->
			<uni-popup ref="popup" type="bottom" :mask-click="true">
				<view class="scortop">
					<view class="title">编辑图片信息</view>
					<uni-icons type="close" size="30" @click="close"></uni-icons>
				</view>
				<view class="scrollbox">
					<view class="title">
						<view class="top">
							<view class="h6">图片类型</view>
							<view class="h5">{{phototype == 1 ? '场所正面照' : phototype == 2 ? '营业执照' :  phototype == 3 ? '安全培训照片' : '消防安全承诺书'}}
							</view>
						</view>
						<view class="top">
							<view class="h6">上传图片<span>*</span></view>
							<view class="h4" @click="allclearphoto">清空图片</view>
						</view>
						<view class="photocontent">
							<!-- <div @click="select">ddd</div> -->
							<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select"
								@progress="progress" @delete="deLete" @success="success" file-extname="png,jpg" file-mediatype="image" @fail="fail" />
						</view>
					</view>
				</view>
				<!-- <button @click="detailclose" class="button red">关闭</button>
								<button @click="placeEdit()" class="button blue">确认</button> -->
				<view class="text-center padding">
					<button class="cu-btn lg line-blue margin-right shadow" @tap="close">关闭
					</button>
					<button class="cu-btn lg bg-blue shadow" @tap="photoAdd">确认
					</button>
				</view>
			</uni-popup>


			<!-- 弹出编辑基本信息 -->
			<uni-popup ref="popupedit" type="bottom" :mask-click="true">
				<view class="scortop">
					<view class="title">场所编辑</view>
					<uni-icons type="close" size="30" @click="detailclose"></uni-icons>
				</view>

				<view class="scrollbox">
					<view class="formbox">
						<view class="border">
							<uni-forms ref="form" :modelValue="formDataEdit" :rules="rules">
								<uni-forms-item label="名称" name="placeName">
									<input class="input" v-model="formDataEdit.placeName" type="text" />
								</uni-forms-item>
								<uni-forms-item label="行业类别" name="industryCategory">
									<uni-data-picker :border="false" v-model="formDataEdit.industryCategory"
										:localdata="categoryList" :clear-icon="false" popup-title="请行业类别">
									</uni-data-picker>
								</uni-forms-item>
								<uni-forms-item label="场所状态" name="placeStatus">
									<mySelect v-model="formDataEdit.placeStatus" placeholder="请选择场所状态"
										dictCode="place_status" space></mySelect>
								</uni-forms-item>
								<!-- <uni-forms-item label="面积(平米)" name="acreage">
									<input class="input" v-model="formDataEdit.acreage" type="text" />
								</uni-forms-item> -->
								<uni-forms-item label="负责人" name="principalName">
									<input class="input" v-model="formDataEdit.principalName" type="text" />
								</uni-forms-item>
								<uni-forms-item label="联系电话" name="principalPhone">
									<input class="input" v-model="formDataEdit.principalPhone" type="number" />
								</uni-forms-item>
							</uni-forms>
						</view>
						<view class="border">
							<uni-forms ref="form" :modelValue="formDataEdit" :rules="rules">
								<uni-forms-item label="所属地区" name="community">
										<uni-data-picker :border="false" v-model="formDataEdit.community" :localdata="queryTreeList"
											:map="{text:'departName',value:'id'}" popup-title="请选择类型"></uni-data-picker>
								</uni-forms-item>
								<uni-forms-item label="网格号" name="grid">
									<input class="input" v-model="formDataEdit.grid" type="text" />
								</uni-forms-item>
								<uni-forms-item label="详细地址" name="address">
									<input class="input" v-model="formDataEdit.address" type="text" />
									<view  @click="openmap" class="icon-ditu-dibiao"></view>
								</uni-forms-item>
<!-- 								<uni-forms-item label="经纬度" name="whitecode">
									<input @click="openmap" class="input" v-model="formDataEdit.lon" type=text
										placeholder="纬度" />
									<input @click="openmap" class="input" v-model="formDataEdit.lat" type=text
										placeholder="经度" />
								</uni-forms-item> -->
								<!-- <uni-forms-item label="白码地址" name="addressRecognition">
									<input class="input" v-model="formDataEdit.addressRecognition" type="text" />
								</uni-forms-item>
								<uni-forms-item label="门牌地址" name="houseAddress">
									<input class="input" v-model="formDataEdit.houseAddress" type="text" />
								</uni-forms-item>

								<uni-forms-item label="地址编码" name="addressCoding">
									<input class="input" v-model="formDataEdit.addressCoding" type="text" />
								</uni-forms-item>
								<uni-forms-item label="楼栋编码" name="buildingCode">
									<input class="input" v-model="formDataEdit.buildingCode" type="text" />
								</uni-forms-item>
								<uni-forms-item label="门牌名称" name="houseName">
									<input class="input" v-model="formDataEdit.houseName" type="text" />
								</uni-forms-item> -->
								<uni-forms-item label="使用面积" name="usableArea">
									<input class="input" v-model="formDataEdit.usableArea" type="text" />
									<view class="posit">m²</view>
								</uni-forms-item>
								<uni-forms-item label="建筑面积" name="buildingArea">
									<input class="input" v-model="formDataEdit.buildingArea" type="text" />
									<view class="posit">m²</view>
								</uni-forms-item>
								<uni-forms-item label="建筑高度" name="buildingHeight">
									<input class="input" placeholder="例1:1-3、6,例2:1、3、6" v-model="formDataEdit.buildingHeight" type="text" />
									<view class="posit">m</view>
								</uni-forms-item>
								<uni-forms-item label="使用楼层" name="floor">
									<input class="input" v-model="formDataEdit.floor" type="text" />
									<view class="posit">层</view>
								</uni-forms-item>
							</uni-forms>
						</view>
					</view>
				</view>
				<!-- <button @click="detailclose" class="button red">关闭</button>
					<button @click="placeEdit()" class="button blue">确认</button> -->
				<view class="padding flex flex-direction">
					<button class="cu-btn bg-blue lg shadow" @tap="placeEdit">确认</button>
				</view>
			</uni-popup>

		</scroll-view>
	</view>

</template>

<script>
	import appSelect from '@/components/my-componets/appSelect.vue'
	import {
		ACCESS_TOKEN
	} from '@/common/util/constants.js'
	import server from '@/api/server.js'
	import {
		community
	} from '@/common/util/work.js'
	const plan_type = [{
		text: '日常记录',
		value: '日常记录1'
	}, {
		text: '本周工作',
		value: '本周工作2'
	}, {
		text: '下周计划',
		value: '下周计划3'
	}];
	export default {
		components: {
			appSelect,
		},
		data() {
			return {
				role:'admin',
				getid: null,
				queryTreeList: [],
				imageValue: [],
				myFormData: [],
				photoData: [],
				photoDatalist: [],
				photoDatalistone: [],
				categoryList: [],
				modalName: null,
				phototype: 1,
				items: ['基本信息', '图片材料'],
				current: 0,
				// 表单数据
				formData: {
					community: "0",
					name: 'LiMing',
					email: 'dcloud@email.com',
					latitude: '',
				},
				deptUrl: '/sys/sysDepart/queryDepartTreeSync',
				deptParams: {
					params: {
						pid: '3d40571077c34e04b747d235722bb4a5'
					}
				},
				formDataEdit: {},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请选择社区',
							},
							{
								required: true,
								errorMessage: '请输入姓名',
							},
							{
								minLength: 3,
								maxLength: 5,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					placeName: {
						rules: [{
							required: true,
							errorMessage: '请输入名称',
						}, ]
				
					},
					community: {
						rules: [{
							required: true,
							errorMessage: '请输入所属社区',
						}, ]
					},
					latitude: {
						rules: [{
							required: true,
							errorMessage: '请输入纬度/经度',
						}, ]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请输入详细地址',
						}, ]
					},
					principalName: {
						rules: [{
							required: true,
							errorMessage: '请输入负责人',
						}, ]
					},
					principalPhone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话',
						},
						{
							minLength: 11,
							maxLength: 11,
							errorMessage: '联系电话长度在{maxLength} 个字符',
						}
						]
					},
				},
			}
		},
		onShow() {
			this.formDataEdit.lat = this.$store.state.lat
			this.formDataEdit.lon = this.$store.state.lon
			this.formDataEdit.address = this.$store.state.address
		},
		mounted() {
			console.log("this.$Router", this.$root.$mp.query.id);
			this.getid = this.$root.$mp.query.id
			this.getdetail(this.getid)
			this.getdet()
			this.role = this.$store.getters.role
		},
		onLoad(options) {
			//options可以接到index 传过来的值
			// this.getid = options.id
			// this.getdetail(this.getid)

		},
		methods: {
			//打开地图
			openmap() {
				uni.navigateTo({
					url: '/pages/map/map'
				})
			},
			//修改场所详情
			placeEdit() {
				server.placeedit(this.formDataEdit).then(res => {
					this.$nextTick(function() {
						console.log(res)
						if (res.data.code == 200) {
							this.$tip.success('修改成功')
							this.detailclose()
							this.getdetail(this.getid)
						} else {
							this.$tip.error('修改失败')
						}
					});

				})
			},
			//清空全部图片
			allclearphoto() {
				let pin = ''
				this.photoData.forEach(item => {
					if (item.type == this.phototype)
						pin += ',' + item.id
				})
				pin.substr(1)
				server.deleteBatch(pin).then(res => {
					this.$nextTick(function() {
						console.log(res)
						if (res.data.code == 200) {
							this.$tip.success('删除成功')
							this.imageValue = []
						} else {
							this.$tip.error('删除失败')
						}
					});

				})
			},
			//添加图片
			photoAdd() {
				let array = []
				var that = this
				this.myFormData.forEach(function(item) {
					let obj = {}
					obj.placeId = that.formData.id,
						obj.type = that.phototype,
						obj.url = item.url,
						array.push(obj)
				})
				console.log(array,'7777777777777')
				server.photoadd(array).then(res => {
					this.$nextTick(function() {
						console.log(res,'88888888888888')
						this.myFormData = []
						this.imageValue = []
						this.getphotolist()
						this.close()
					});
				})
			},
			//编辑图片
			apiditBatch(index) {
				this.imageValue = []
				this.photoData.forEach(item => {
					if (item.type == index)
						this.imageValue.push({
							name: item.id,
							extname: 'png,jpeg',
							url: item.url
						})
				})
				console.log(this.imageValue,'33333333')
				this.$refs.popup.open('top')
				this.phototype = index
				// server.editBatch(array).then(res => {
				// 	this.$nextTick(function() {
				// 		console.log(res)
				// 	});

				// })
			},
			getchooseImage(){
				console.log('22222222222222222222')
				var that=this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						var urlDate={
							path:res.tempFilePaths[0]
						}
						that.$http.upload(that.$config.apiUrl + '/sys/common/upload?biz=place', {
								filePath: res.tempFilePaths[0],
								name: 'file',
							})
							.then(res => {
								if(res.data.success){
									urlDate.url=res.data.message
									that.myFormData.push(urlDate)
									that.$tip.success('上传成功！')
								
								}else{
									that.$tip.error('上传失败！')
								}
							})
							.catch(err => {
								that.$tip.error(err.data.message)
							});
					}
				});
			},
			// 获取上传状态
			select(e) {
				var that = this
				var tempFilePaths = []
				tempFilePaths = e.tempFilePaths
				console.log("选择文件", e)
				console.log('token',uni.getStorageSync(ACCESS_TOKEN))
				
				tempFilePaths.forEach(function(item) {
					console.log('item',item)
					uni.uploadFile({
							url:that.$config.apiUrl + '/sys/common/upload?biz=place',
							filePath: item,
							name: 'file',
							formData:{
								//iFile:tempFilePaths[0], // 这里一定不能加,加了 iOS 图片上传会失败
								token:uni.getStorageSync(ACCESS_TOKEN),
							},
							success: (res) => {
								console.log(res,"上传图片");
								console.log('res1',JSON.parse(res.data))
								var data = JSON.parse(res.data)
								if(data.success){
									that.myFormData.push({
										path:item,
										url:data.message
									})
									that.$tip.success('上传成功！')
								
								}else{
									that.$tip.error('上传失败！')
								}
							}
						})
					// that.$http.upload(that.$config.apiUrl + '/sys/common/upload?biz=place', {
					// 		filePath: item,
					// 		name: 'file'
					// 	})
					
				})


			},
			//删除图片
			deLete(e) {
				if(this.myFormData.length>0){
					var index = -1
					this.myFormData.forEach((item,i)=>{
						if(e.tempFilePath == item.path){
							index=i
						}
					})
					if(index > -1){
						this.myFormData.splice(index,1)
					}
				}
				server.deleteBatch(e.tempFile.name).then(res => {
					this.$nextTick(function() {
						console.log(res)
					});
				
				})
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			//打开新增图片弹框
			detailpopup(type) {
				this.$refs.popupedit.open('top')
			},
			//行业类别
			getdet() {
				server.categoryList().then(res => {
					this.$nextTick(function() {
						console.log(res)
						this.categoryList = res.data.result
					});
			
				})
				server.queryTreeList().then(res => {
					this.$nextTick(function() {
						console.log(res)
						this.queryTreeList = res.data.result
					});
			
				})
			},
			close() {
				this.$refs.popup.close()
			},
			detailclose() {
				this.$refs.popupedit.close()
			},
			getdetail(getid) {
				server.listBydetail(getid).then(res => {
					console.log(res)
					this.formData = res.data.result
					this.formDataEdit = res.data.result

					// this.deptParams.params.pid = res.data.result.community

				})
			},
			//点击图片放大观看
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			getphotolist() {
				server.photolist(this.getid).then(res => {
					this.$nextTick(function() {
						console.log(res)
						this.photoData = res.data.result
					});
				})
			},
			//图片预览
			photoPreview(data, index) {
				console.log(data)
				let photoList = data.map(item => {
					return item.url;
				});
				uni.previewImage({
					current: index,
					urls: photoList
				});
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
				if (e.currentIndex == 1) {
					this.getphotolist()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/.cu-form-group uni-picker::after {
		content: unset;
	}

	.cu-form-group {
		padding: unset;
		min-height: unset;
	}


	.formbox {
		background: white;
		padding: 10px;

		.border {
			padding: 10px;
			border: 1px solid #dddd;
			border-radius: 20px;
			box-shadow: 1px 1px 13px 0px #ccc;
			margin-bottom: 10px;
		}

		/deep/.is-direction-left {
			border-bottom: 1px solid #ddd;
		}

		/deep/.uni-forms-item__inner {
			padding: 6px 0;

		}

		/deep/.is-input-error-border {
			border: unset !important;
		}

		/deep/.uni-forms-item__label .label-text {
			font-size: 15px;
			color: grey;
		}

		.uni-input-placeholder {
			color: #8799a3;
		}
	}


	.photocai {
		background: white;

		.li {
			float: left;
			width: 100%;
			padding: 5px;
			background: white;

			.top {
				margin-bottom: 8px;
				font-size: 16px;

				span {
					float: right;
					color: blue;
				}
			}

			uni-image,
			image {
				width: 60px;
				height: 60px;
				float: left;
				margin-right: 10px;
				margin-bottom: 10px;
			}
		}
	}

	.fixedbottm {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: white;

		.two {
			width: 100%;
			float: left;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			justify-content: space-evenly;

			span {
				padding: 8px 25px;

				border-radius: 30px;
			}

			span:nth-child(1) {
				background: blue;
			}

			span:nth-child(2) {
				background: red;
			}
		}
	}

	.page,
	scroll-view {
		padding-bottom: 100px;
	}

	/deep/.uni-popup__wrapper-box {
		background-color: white;

		.text {
			text-align: center;
			margin: 10px 0;
			font-size: 18px;
		}

		.title {
			padding: 0 10px;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #ccc;
				padding-bottom: 10px;
				margin-bottom: 10px;

				.h6 {
					font-size: 18px;
					color: #888;

					span {
						color: red;
						font-size: 12px;
					}
				}

				.h5 {
					font-size: 18px;
				}

				.h4 {
					font-size: 14px;
					color: #999;
				}
			}

		}

		.title .top:nth-child(2) {
			border-bottom: unset;
		}
	}

	/deep/.cu-custom .cu-bar {
		z-index: 9;
	}
	.icon-ditu-dibiao{
		    font-size: 28px;
		    color: #6363ea;
		    float: right;
		    position: absolute;
		    right: 7px;
	}
</style>
